<script setup lang="tsx">
import type { FormSchema } from '@/components/Form'
import { ref, reactive, unref, watch, onMounted } from 'vue'
import { ElDialog, ElTree } from 'element-plus'
import { Search } from '@/components/Search'
import { Table, type TableColumn } from '@/components/Table'
import { BaseButton } from '@/components/Button'
import { useTable } from '@/hooks/web/useTable'
const { title, fetchData, fetchCateData } = defineProps({
  title: String,
  fetchData: {
    type: Function,
    required: true
  },
  fetchCateData: {
    type: Function,
    required: true
  }
})
const show = defineModel({ type: Boolean, default: false })
watch(show, async (val) => {
  if (!val) {
    const elTableRef = await getElTableExpose()
    elTableRef?.clearSelection()
  }
})

const emit = defineEmits(['change'])
const TableSchema = reactive<TableColumn[]>([
  {
    field: 'selection',
    type: 'selection'
  },
  {
    field: 'imgList',
    label: '商品图片'
  },
  {
    field: 'goods_name',
    label: '商品名称'
  },
  {
    field: 'spec_name',
    label: '规格名称'
  },
  {
    field: 'purchasing_price',
    label: '进货价'
  },
  {
    field: 'money',
    label: '售卖价'
  }
])

const searchParams = ref({})
const searchSchema = reactive<FormSchema[]>([
  {
    field: 'name',
    label: '商品名称',
    component: 'Input'
  }
])
const setSearchParams = (params: any) => {
  searchParams.value = params
  getList()
}

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await fetchData({
      page: unref(currentPage),
      limit: unref(pageSize),
      ...unref(searchParams)
    })
    return {
      list: res.data.list.map((res) => {
        const resultArray = res.img.split(',')
        return {
          ...res,
          imgList: resultArray[0]
        }
      }),
      total: res.data.count
    }
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList, getElTableExpose } = tableMethods
onMounted(() => {
  getCateData()
})

const opinons = ref<Array<{ name: string; id: number }>>([])
const getCateData = async () => {
  const res = await fetchCateData({ field: 'name,pid,id' })
  opinons.value = res.data.list
}
const handleClickNode = (data) => {
  if (data) {
    searchParams.value = {
      goods_cate_id_two: data?.id
    }
    getList()
  }
}

const submit = async () => {
  const elTableRef = await getElTableExpose()
  const selections = elTableRef?.getSelectionRows()
  emit('change', unref(selections))
  show.value = false
}
</script>

<template>
  <ElDialog v-model="show" :title="title">
    <div class="flex">
      <div class="w-[25%]">
        <p>全部分类</p>
        <ElTree
          :props="{ label: 'name', children: 'children' }"
          node-key="id"
          :data="opinons"
          @node-click="handleClickNode"
        />
      </div>
      <div class="flex-auto">
        <Search :schema="searchSchema" @search="setSearchParams" @reset="setSearchParams" />
        <Table
          v-model:pageSize="pageSize"
          v-model:currentPage="currentPage"
          class="w-full"
          height="50vh"
          :imagePreview="['imgList']"
          :columns="TableSchema"
          :data="dataList"
          :loading="loading"
          :pagination="{ total }"
          reserveSelection
          row-key="goods_rule_id"
          @register="tableRegister"
        />
      </div>
    </div>
    <template #footer>
      <BaseButton @click="show = false">取消</BaseButton>
      <BaseButton type="primary" @click="submit">确定</BaseButton>
    </template>
  </ElDialog>
</template>
